<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>小峰音乐播放器</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      background-color: rgba(209, 225, 63, 0.5);
      box-sizing: border-box;
    }

    .top {
      width: 100%;
      height: 55px;
      line-height: 55px;
      background-color: #fff8a8;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top .logo {
      font-size: 18px;
      font-weight: 600;
      color: #bdb2b2;
      padding-left: 100px;
      letter-spacing: 2px;
    }

    .top .logo img {
      width: 50px;
      vertical-align: bottom;
      margin-bottom: 2px;
    }

    .top .user {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 80px;
      color: #115049;
    }

    .top .user img {
      width: 45px;
      object-fit: contain;
      border-radius: 50%;
      vertical-align: middle;
      margin-bottom: 2px;
      margin-right: 20px;
      box-shadow: 1px 1px 5px #ccc;
    }

    .musicArea {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 130px;
      display: flex;
    }

    .musicArea .musicList .title,
    .musicArea .musicList .item {
      display: flex;
      align-items: center;
      font-size: 18px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e3d498;
    }

    .musicArea .musicList .item {
      box-sizing: border-box;
      padding-left: 8px;
      font-size: 16px;
      color: #16635a;
    }

    .musicArea .musicList .title div,
    .musicArea .musicList .item div {
      width: 200px;
    }

    .musicArea .musicList .title div:first-child,
    .musicArea .musicList .item div:first-child {
      width: 500px;
    }

    .musicArea .musicList .item .music_name:hover {
      cursor: pointer;
      color: #a8a0a0;
    }

    .musicArea .localList {
      flex: 1;
      height: 700px;
      margin-left: 50px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      padding: 15px 20px;
    }

    .musicArea .localList h4 {
      text-align: center;
    }

    .musicArea .localList .title,
    .musicArea .localList .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e3d498;
    }

    .musicArea .localList .title div,
    .musicArea .localList .item div {
      width: 120px;
      padding: 5px 0;
    }

    .musicArea .localList .title div:first-child,
    .musicArea .localList .item div:first-child {
      width: 200px;
    }

    .musicArea .localList .item {
      font-size: 14px;
    }

    .musicArea .localList .item div:last-child:hover {
      cursor: pointer;
      color: #7411b1;
    }

    .musicArea .showInfo {
      width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .musicArea .showInfo .music_Img {
      width: 220px;
      height: 220px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 50px;
    }

    .musicArea .showInfo .music_Img img {
      width: 100%;
      object-fit: contain;
    }

    .musicArea .showInfo .actived {
      animation: musicPic 10s linear infinite;
    }

    .musicArea .showInfo .Info_name {
      font-size: 18px;
      color: #6c5e5e;
    }

    .musicArea .showInfo .Info_name div {
      text-align: center;
      margin-bottom: 10px;
    }

    /* 图片动画 */
    @keyframes musicPic {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .control {
      position: absolute;
      left: 50px;
      bottom: 20px;
      width: 90vw;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 0 50px;
      box-sizing: border-box;
    }

    .control img {
      width: 35px;
      object-fit: contain;
      cursor: pointer;
    }

    .control .left {
      display: flex;
      align-items: center;
      margin-right: 45px;
    }

    .control .left div {
      padding: 0 20px;
    }

    .control .left div .play {
      width: 50px;
    }

    .control .center {
      width: 55vw;
      margin-right: 20px;
    }

    .control .center .detial {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 50px;
    }

    .control .center .jdu,
    .control .right .volume .volumescale {
      position: relative;
      width: 100%;
      height: 3px;
      border-radius: 3px;
      font-size: 0px;
      background-color: #e4e4e4;
      margin-bottom: 20px;
    }

    .control .center .jdu div,
    .control .right .volume .volumescale div {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0px;
      height: 3px;
      width: 0;
      background-color: #3be3ff;
    }

    .control .center .jdu span,
    .control .right .volume .volumescale span {
      position: absolute;
      left: -2px;
      top: -3px;
      width: 10px;
      height: 10px;
      background-color: rgb(0, 145, 255);
      border-radius: 50%;
      cursor: pointer;
    }

    .control .right .volume .volumescale {
      margin-left: 10px;
      margin-bottom: 0;
    }

    .control .right .volume .volumescale span {
      background-color: #736d6d;
    }

    .control .right .volume .volumescale div {
      background-color: #715bee;
    }

    .control .right {
      display: flex;
    }

    .control .right .toggle {
      text-align: center;
      width: 100px;
      margin: 0 30px;
      height: 35px;
      line-height: 35px;
      background-color: rgba(201, 195, 195, 0.25);
      border-radius: 15px;
    }

    .control .right .toggle:hover {
      cursor: pointer;
      color: #fff;
      background-color: rgba(59, 56, 56, 0.25);
    }

    .control .right .volume {
      display: flex;
      align-items: center;
      height: 35px;
      line-height: 35px;
    }

    .control .right .volume .volumescale {
      width: 200px;
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="top">
    <div class="logo">
      <img src="./img/yinyue.png" alt="" /> 小峰简约音乐播放器
    </div>
    <div class="user">
      <div class="headImg">
        <img
          src="https://p5-pro.a.yximgs.com/uhead/AB/2023/01/13/16/BMjAyMzAxMTMxNjAzMDhfMzIwNTU1NDExXzJfaGQ3NDVfNDc4_s.jpg" />
      </div>
      <div class="name">凌小峰[编程区]</div>
    </div>
  </div>

  <!-- 音乐区域 -->
  <div class="musicArea">
    <!-- 播放列表 -->
    <div class="musicList">
      <div class="title">
        <div>歌名</div>
        <div>歌手</div>
        <div></div>
      </div>
      <!-- <div class="item">
          <div class="music_name">七里香</div>
          <div class="music_authod">周杰伦</div>
        </div> -->
    </div>
    <!-- 右侧展示当前歌曲 -->
    <div class="showInfo">
      <div class="music_Img"><img
          src="https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D2891255342%2C1260397678%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D300%26h%3D300&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=50d115389e822161610434af2459c89b"
          alt=""></div>
      <div class="Info_name">
        <div>七里香</div>
        <div>周杰伦</div>
      </div>

    </div>
  </div>

  <!-- 本地列表 -->
  <!--
      <div class="localList">
        <h4>本地列表</h4>
        <div class="title">
          <div>歌名</div>
          <div>歌手</div>
          <div>添加至播放列表</div>
        </div>
        <div class="item">
          <div class="music_name">七里香</div>
          <div class="music_authod">周杰伦</div>
          <div>点击添加</div>
        </div>
      </div> -->
  </div>
  <!-- 播放控制器 -->
  <div class="control">
    <audio src=""></audio>
    <div class="left">
      <div id="playUp"><img src="./img/left.png" alt="" /></div>
      <div id="playBtn"><img class="play" src="./img/play.png" alt="" /></div>
      <div id="playDowm"><img src="./img/right.png" alt="" /></div>
    </div>
    <div class="center">
      <div class="detial">
        <div class="left" id="playMusicInfo">-- - --</div>
        <div class="right" id="playMusicTime">00 : 00 / -- : --</div>
      </div>
      <div class="jdu" id="jdubar">
        <div></div>
        <span id="jdubtn"></span>
      </div>
    </div>
    <div class="right">
      <!-- <div class="toggle">本地列表</div> -->
      <div class="volume">
        <img id="mute" src="./img/yinliang.png" alt="" />
        <div class="volumescale" id="volumebar">
          <div></div>
          <span id="volumebtn"></span>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 定义播放列表假数据
    let playList = [{
        name: "七里香",
        author: "周杰伦",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D2891255342%2C1260397678%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D300%26h%3D300&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=50d115389e822161610434af2459c89b",
        src: "http://ws.stream.qqmusic.qq.com/C400002o6mJ80nAIsK.m4a?guid=283013486&vkey=AD1B9C1E7314604B3B9E61F2B8F19B634FFCE95FB4649F726B2FD1A55DEAC55E47FB96F08C3524C8CE73E3A09BCD880D4B4A29E589B64A84&uin=&fromtag=120032",
      },
      {
        name: "那是你离开了北京的生活",
        author: "薛之谦",
        pic: 'https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips3.baidu.com%2Fit%2Fu%3D2372854948%2C453567459%26fm%3D3007%26app%3D3007%26f%3DPNG%3Fw%3D500%26h%3D500&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=daebc41ead90cfe64a3f15955f24d4c5',
        src: "http://music.163.com/song/media/outer/url?id=571340283.mp3",
      },
      {
        name: "天外来物",
        author: "薛之谦",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D3657830979%2C1954193363%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D500%26h%3D500&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=456861fdfb0379b692d478bfd5e1bf09",
        src: "http://music.163.com/song/media/outer/url?id=1463165983.mp3",
      },
      {
        name: "我好像在哪见过你",
        author: "薛之谦",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D2389434671%2C4017970999%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D500%26h%3D500&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=9ee5e2c39525d9adb7822c7186bdaf1f",
        src: "http://music.163.com/song/media/outer/url?id=417859631.mp3",
      },
      {
        name: "富士山下",
        author: "陈奕迅",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips3.baidu.com%2Fit%2Fu%3D1531071121%2C3908871305%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D460%26h%3D500&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=22dc018c45800572ea7091b39586b45a",
        src: "http://ws.stream.qqmusic.qq.com/C4000032PB2V2QYWSC.m4a?guid=869134990&vkey=CBE518B8684349FC6BCDAA1F55E9CDF22C8E4713FC3564087F562B1DA5E8640648289D1E19526A45C3B81400F278011FFD5BD83022843029&uin=&fromtag=120032",
      },
      {
        name: "最佳损友",
        author: "陈奕迅",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D1182101427%2C3397917819%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D500%26h%3D495&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=b930ca9e4ad0ed08d879659c5b66f960",
        src: "http://ws.stream.qqmusic.qq.com/C400001honc23hEmz0.m4a?guid=869134990&vkey=30F6BCE65FC20522E76D13FA556DA61D3A1E5647EDCF7D30C84E0FA2D74315A96958EE55AEF44DE949E4E12BA8FFDB0A5C42095C3F6814DF&uin=&fromtag=120032",
      },
      {
        name: "空白格",
        author: "杨宗纬",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D4081625237%2C2577115949%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D480%26h%3D480&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=e7511af9d0ace7e6b9647fc889b4102f",
        src: "http://ws.stream.qqmusic.qq.com/C400004PKwqT2u0rtC.m4a?guid=987118670&vkey=DDB16F6456DB16EDA83DD2114488E5BEADB7F490A5780B4F0B6E0CC10325D01E4D6791E68A68BBED1713531E75523B3AB157B8A6E7567219&uin=&fromtag=120032",
      },
      {
        name: "洋葱 (Live) ",
        author: "杨宗纬,白小白",
        pic: "https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D2594138775%2C2306417386%26fm%3D3007%26app%3D3007%26f%3DPNG%3Fw%3D500%26h%3D500&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=ff6fb59210713c608864e31f0d8dab3f",
        src: "http://ws.stream.qqmusic.qq.com/C400001M7JXd1BM2io.m4a?guid=987118670&vkey=3DAE896928896CFD57A75536371847F82614A1688F6F8E25220DCECDB866BBCE72F185A9EDA719A122EF9D325756CBF14242E05EBE5C033C&uin=&fromtag=120032",
      },
    ];
    let musicList = document.querySelector(".musicList");
    // 遍历播放列表，插入html
    for (let i = 0; i < playList.length; i++) {
      let item = document.createElement("div");
      item.className = "item";
      let htmlStr = `
          <div class="music_name"  onclick="selectPlay(${i})">${playList[i].name}</div>
          <div class="music_authod" >${playList[i].author}</div>
        `;
      item.innerHTML = htmlStr;
      musicList.appendChild(item);
    }
    // 定义当前播放歌曲
    let nowPlay = null;
    // 当前播放时长
    let nowPlayTime = 0;
    let isPlaying = false;

    // Auido
    let Auido = document.querySelector("audio");
    // 获取播放按钮
    let playBtn = document.querySelector("#playBtn");
    playBtn.onclick = togglePlay;
    // 获取播放时长Dom
    let playMusicTime = document.querySelector("#playMusicTime");
    let playMusicInfo = document.querySelector("#playMusicInfo");

    // 获取声音按钮
    let muteBtn = document.querySelector("#mute");

    // 获取音乐进度条相关
    let jdubtn = document.getElementById("jdubtn");
    let jdubar = document.getElementById("jdubar");
    let jdstep = jdubar.getElementsByTagName("div")[0];
    progress(jdubtn, jdubar, jdstep, function (percentage) {
      Auido.currentTime = percentage * 0.01 * Auido.duration;
    });

    // 获取音量进度条相关
    let volumebtn = document.getElementById("volumebtn");
    let volumebar = document.getElementById("volumebar");
    let volumestep = volumebar.getElementsByTagName("div")[0];
    // 设置当前音量的样式
    volumebtn.style.left = volumebar.offsetWidth + "px";
    volumestep.style.width = volumebar.offsetWidth + "px";
    progress(volumebtn, volumebar, volumestep, function (percentage) {
      Auido.volume = percentage * 0.01;
      if (Auido.volume == 0) {
        muteBtn.src = "./img/guanbiyinliang.png";
      } else {
        if (Audio.muted) {
          Audio.muted = !Audio.muted
        }
        muteBtn.src = "./img/yinliang.png";
      }
    });
    // 切换是否静音
    muteBtn.onclick = function () {
      Auido.muted = !Auido.muted;
      if (Auido.muted) {
        volumebtn.style.left = -2 + "px";
        volumestep.style.width = 0 + "px";
        muteBtn.src = "./img/guanbiyinliang.png";
      } else {
        volumebtn.style.left = volumebar.offsetWidth * Auido.volume + "px";
        volumestep.style.width = volumebar.offsetWidth * Auido.volume + "px";
        muteBtn.src = "./img/yinliang.png";
      }
    };

    // 获取到info的 music_Img dom
    let music_Img = document.querySelector(".music_Img");
    // 获取到info的图片
    let pic = music_Img.querySelector("img");
    // 获取到info的音乐信息
    let info = document.querySelector('.Info_name')


    // 播放/暂停音乐函数
    function togglePlay(e, music, index) {
      // 如果是通过点击列表的，则先暂停
      if (music) {
        // 停止播放
        Auido.pause();
        // 更改播放状态
        isPlaying = false;
      }
      // 在播放，则切换暂停状态
      if (isPlaying) {
        // 停止播放
        Auido.pause();
        // 更改播放状态
        isPlaying = false;
        // 更改播放按钮图标
        playBtn.querySelector("img").src = "./img/play.png";
        music_Img.className = 'music_Img'
      } else {
        music_Img.className = 'music_Img actived'
        isPlaying = true;
        playBtn.querySelector("img").src = "./img/stop.png";
        if (playList.length == 0) {
          alert("请先添加歌曲到播放列表");
          return;
        }
        if (nowPlay == null) {
          nowPlay = playList[0];
          nowPlay.index = 0;
        }
        if (music) {
          console.log("music", music);
          nowPlay = music;
          nowPlay.index = index;
        }

        // 设置音乐的名称和作者
        playMusicInfo.innerText = nowPlay.name + " - " + nowPlay.author;
        pic.src = nowPlay.pic;
        info.innerHTML = `
          <div>${nowPlay.name}</div>
          <div>${nowPlay.author}</div>
          `
        isPlaying = true;
        Auido.src = nowPlay.src;
        Auido.play();
        console.dir(Auido);
        // 定时器获取当前播放时长
        let playtimer = setInterval(() => {
          nowPlay.duration = Math.round(Auido.duration);
          if (nowPlayTime == nowPlay.duration) {
            clearInterval(playtimer);
          }
          nowPlayTime = Math.round(Auido.currentTime);
          playMusicTime.innerText =
            formateTime(nowPlayTime) + " / " + formateTime(nowPlay.duration);
          // 修改播放进度条样式
          let progre = nowPlayTime / Math.round(Auido.duration);
          jdubtn.style.left = jdubar.offsetWidth * progre + "px";
          jdstep.style.width = jdubar.offsetWidth * progre + "px";
        }, 1000);
      }
    }
    // 进度函数
    function progress(btn, bar, step, callback) {
      // 监听拖动按钮事件
      btn.onmousedown = function (e) {
        // 获取鼠标相对于浏览器窗口可视区域的X坐标
        var x = e.clientX;
        // 获取当前元素距离父元素左边缘的距离
        var l = this.offsetLeft;
        // 总进度的宽度 - 拖动元素的内容宽度
        var max = bar.offsetWidth - this.offsetWidth;
        // 监听移动事件
        window.onmousemove = function (e) {
          // 计算当前拖动距离  【-2是因为上面写的left为-2】
          var to = Math.min(max, Math.max(-2, l + (e.clientX - x)));
          btn.style.left = to + "px";
          step.style.width = Math.max(0, to) + "px";
          // 执行各自的回调函数
          callback(Math.round(Math.max(0, to / max) * 100));
        };
      };
      // 监听鼠标抬起则移除事件
      window.onmouseup = function () {
        onmousemove = null;
      };
    }
    // 时间格式化
    function formateTime(time) {
      let m =
        Math.floor(time / 60) > 9 ?
        Math.floor(time / 60) :
        "0" + Math.floor(time / 60);

      let s =
        Math.floor(time % 60) > 9 ?
        Math.floor(time % 60) :
        "0" + Math.floor(time % 60);

      return m + " : " + s;
    }

    let playUp = document.querySelector("#playUp");
    let playDowm = document.querySelector("#playDowm");
    // 切换上一曲
    playUp.onclick = function (e) {
      if (nowPlay != null) {
        if (nowPlay.index == 0) {
          alert("已经是第一首了!");
        } else {
          togglePlay(e, playList[nowPlay.index - 1], nowPlay.index - 1);
        }
      } else {
        togglePlay();
      }
    };
    // 切换下一曲
    playDowm.onclick = function (e) {
      if (nowPlay != null) {
        if (nowPlay.index == playList.length - 1) {
          alert("已经是最后一首了!");
        } else {
          togglePlay(e, playList[nowPlay.index + 1], nowPlay.index + 1);
        }
      } else {
        togglePlay();
      }
    };

    // 点击播放
    function selectPlay(i) {
      togglePlay(null, playList[i], i);
    }

    // 监听播放下一曲
    Auido.addEventListener(
      "ended",
      function (e) {
        if (nowPlay.index == playList.length - 1) {
          togglePlay(e, playList[0], 0);
        } else {
          togglePlay(e, playList[nowPlay.index + 1], nowPlay.index + 1);
        }
      },
      false
    );
  </script>
</body>

</html>